<template>
  <div class="line">
    <div class="line-label">
      {{label}}
    </div>
    <div class="line-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const {label} = defineProps<{
  label: string
}>()
</script>

<style scoped lang="scss">

.line {
  display: flex;
  font-size: 14px;
  color: #909399;
  border-top: 1px solid #F4F5F9;
  border-left: 1px solid #F4F5F9;
  border-right: 1px solid #F4F5F9;

  .line-label {
    width: 120px;
    padding: 15px;
    background-color: #F4F5F9;
    text-align: right;
    color: var(--el-table-header-text-color);
    border-right: 1px solid #F4F5F9;
  }

  .line-content {
    padding: 15px;
    flex: 1;
    transition: all linear 200ms;
  }

  .line-content:hover {
    background: rgba(230, 233, 241, 0.3);
  }
}

.line:last-child {
  border-bottom: 1px solid #F4F5F9;
}
</style>